<style scoped lang="less">
</style>
<template>
	<div class="area-tree">
		<el-tree
			:data="data"
			node-key="id"
			:props="defaultProps"
			@node-click="handleNodeClick"
			unselectable="on"
			:expand-on-click-node="false"
			:default-expanded-keys="defaultExpandedKeys"
			:indent="36">
				<div class="tree-node" :class="{active: activeTypeId==data.id}" slot-scope="{ node, data }">{{ data.name }}</div>
			</el-tree>
	</div>
	<!-- render-content="renderContent" -->
</template>
<script>

import { mapState } from 'vuex'
export default {
	name: 'iotBlk',
	props: {
		activeId: {
			type: String,
			default: ''
		}
	},
	computed: {
		...mapState([
			'scale'
		]),
		defaultExpandedKeys () {
			return this.activeId ? [this.activeId] : ['0']
		},
	},
	watch: {},
	data () {
		return {
			data: [],
			defaultProps: {
			  children: 'checkaddrTypes',
			  label: 'name'
			},
			activeTypeId: ''
		}
	},
	methods: {
		getType () {
			this.$get('/check/checkaddr/checkaddrTypeList').then(res => {
				this.data = [{
					id: '0',
					name: '全部类型',
					checkaddrTypes: res.data,
					pid:0
				}]
			}, (err) =>{
				if(err.msg){
					this.$message.error(err.msg);
				}
			})
		},
		getAllName(node,names){
			names.push(node.data.name)
			if(node.parent && node.data.pid!=0){
				this.getAllName(node.parent,names)
			}
		},
		handleNodeClick(data,node,n) {
			this.activeTypeId = data.id
			let names = []
			this.getAllName(node,names)
			names = names.reverse()
			this.$emit('nodeClick',data,node.level,names)
		}
	},
	created () {
		this.getType()
		this.activeTypeId = this.activeId
	},
}
</script>